<vdr-page-block>
    <vdr-action-bar>
        <vdr-ab-left> </vdr-ab-left>
        <vdr-ab-right>
            <vdr-action-bar-items locationId="role-list" />
            <a
                class="btn btn-primary"
                *vdrIfPermissions="['CreateAdministrator']"
                [routerLink]="['./', 'create']"
            >
                <clr-icon shape="plus"></clr-icon>
                {{ 'settings.create-new-role' | translate }}
            </a>
            <vdr-action-bar-dropdown-menu locationId="role-list" />
        </vdr-ab-right>
    </vdr-action-bar>
</vdr-page-block>
<vdr-data-table-2
    [id]="dataTableListId"
    [items]="items$ | async"
    [itemsPerPage]="itemsPerPage$ | async"
    [totalItems]="totalItems$ | async"
    [currentPage]="currentPage$ | async"
    [filters]="filters"
    (pageChange)="setPageNumber($event)"
    (itemsPerPageChange)="setItemsPerPage($event)"
    (visibleColumnsChange)="setVisibleColumns($event)"
>
    <vdr-bulk-action-menu
        locationId="role-list"
        [hostComponent]="this"
        [selectionManager]="selectionManager"
    />
    <vdr-dt2-search
        [searchTermControl]="searchTermControl"
        [searchTermPlaceholder]="'catalog.filter-by-name' | translate"
    />
    <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">
        <ng-template let-role="item">
            {{ role.id }}
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column
        [heading]="'common.created-at' | translate" id="created-at"
        [hiddenByDefault]="true"
        [sort]="sorts.get('createdAt')"
    >
        <ng-template let-role="item">
            {{ role.createdAt | localeDate : 'short' }}
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column
        [heading]="'common.updated-at' | translate" id="updated-at"
        [hiddenByDefault]="true"
        [sort]="sorts.get('updatedAt')"
    >
        <ng-template let-role="item">
            {{ role.updatedAt | localeDate : 'short' }}
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column
        [heading]="'common.description' | translate" id="description"
        [optional]="false"
        [sort]="sorts.get('description')"
    >
        <ng-template let-role="item">
            <a
                *ngIf="!isDefaultRole(role); else defaultRole"
                class="button-ghost"
                [routerLink]="['./', role.id]"
                ><span>{{ role.description }}</span>
                <clr-icon shape="arrow right"></clr-icon>
            </a>
            <ng-template #defaultRole>
                {{ role.description }}
            </ng-template>
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column [heading]="'common.code' | translate" id="code" [sort]="sorts.get('code')">
        <ng-template let-role="item">
            <span *ngIf="!isDefaultRole(role)">{{ role.code }}</span>
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column [heading]="'settings.channel' | translate" id="channel">
        <ng-template let-role="item">
            <ng-container *ngIf="!isDefaultRole(role)">
                <vdr-chip *ngFor="let channel of role.channels">
                    <vdr-channel-badge [channelCode]="channel.code"></vdr-channel-badge>
                    <div class="ml-1">{{ channel.code | channelCodeToLabel | translate }}</div>
                </vdr-chip>
            </ng-container>
        </ng-template>
    </vdr-dt2-column>
    <vdr-dt2-column [heading]="'settings.permissions' | translate" id="permissions">
        <ng-template let-role="item">
            <ng-container *ngIf="!isDefaultRole(role); else defaultRole">
                <div class="permissions-list">
                    <vdr-chip
                        *ngFor="let permission of role.permissions | slice : 0 : displayLimit[role.id] || 3"
                        >{{ permission }}</vdr-chip
                    >
                    <button
                        class="button-small"
                        *ngIf="role.permissions.length > initialLimit"
                        (click)="toggleDisplayLimit(role)"
                    >
                        <ng-container
                            *ngIf="(displayLimit[role.id] || 0) < role.permissions.length; else collapse"
                        >
                            <clr-icon shape="plus"></clr-icon>
                            {{ role.permissions.length - initialLimit }}
                        </ng-container>
                        <ng-template #collapse>
                            <clr-icon shape="minus"></clr-icon>
                        </ng-template>
                    </button>
                </div>
            </ng-container>
            <ng-template #defaultRole>
                <span class="default-role-label">{{ 'settings.default-role-label' | translate }}</span>
            </ng-template>
        </ng-template>
    </vdr-dt2-column>
</vdr-data-table-2>
